<template>
<q-page ref="MusicPage" class="bg-grey-10" style="padding-top:50px" :style-fn="handlePageHeight">
    <q-tab-panels dark v-model="curTab" class="full-width">
        <q-tab-panel dark name="library" class="q-pa-none bg-grey-10">
            <effect-list ref="libraryList" tab="library" :typeList="typeList"></effect-list>
        </q-tab-panel>

        <q-tab-panel name="collection" class="q-pa-none">
            <effect-list ref="CollectionList" tab="collection" :isADD="true" :typeList="typeList"></effect-list>
        </q-tab-panel>

        <q-tab-panel name="like" class="q-pa-none">
            <effect-list ref="LikeList" tab="like" :typeList="typeList"></effect-list>
        </q-tab-panel>
    </q-tab-panels>

    <q-page-sticky expand position="top" class="items-start" style="height:50px">
        <div class="bg-dark full-width full-height row no-wrap items-center ">
            <q-breadcrumbs v-if="curTab=='library'" class="q-px-sm col-shrink no-wrap text-primary">
                <q-breadcrumbs-el v-if="tickedType.length==0" label="全部" icon="widgets" />
                <div style="overflow-x:scroll" class="row no-wrap hide-scrollbar">
                    <q-chip v-for="item in tickedType" :key="item.et_id" removable @remove="handleRemoveTypeTicked(item.et_id)" color="primary" text-color="white">
                        {{ item.name }}
                    </q-chip>
                </div>
            </q-breadcrumbs>
            <q-breadcrumbs v-if="curTab=='collection'" class="q-px-sm text-primary ">
                <q-breadcrumbs-el v-for="item in curCollectionPath" :key="item.ecf_id" :label="item.name" @click="handleCollectionSelect(item.ecf_id)" class="cursor-pointer" />

            </q-breadcrumbs>
            <q-breadcrumbs v-if="curTab=='like'" class="q-px-sm text-primary">
                <q-breadcrumbs-el v-for="item in curLikePath" :key="item.elf_id" :label="item.name" @click="handleLikeSelect(item.elf_id)" class="cursor-pointer" />

            </q-breadcrumbs>
            <div class="col-grow row justify-end" v-if="curTab=='collection'">
                <q-btn outline dark dense color="grey-4" icon="mdi-lan" class="q-mr-sm" @click="isLocalEffectDialog=true">Nas效果</q-btn>
            </div>

            <div class="col-grow row justify-end" v-if="curTab=='library'">
                <!-- <q-btn class="q-mr-sm" v-if="!isSearch" flat dense :icon="sortIcon">
                    <q-menu dark>
                        <q-list dense style="min-width: 100px" class="shadow-7">
                            <q-item @click="handleLoadMusicEasy('name','mdi-sort-alphabetical-ascending')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-sort-alphabetical-ascending" />
                                        <span>按名称排序</span>
                                    </div>

                                </q-item-section>
                            </q-item>
                            <q-item @click="handleLoadMusicEasy('rate','mdi-star-outline')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-star-outline" />
                                        <span>按评分排序</span>
                                    </div>
                                </q-item-section>
                            </q-item>
                            <q-item @click="handleLoadMusicEasy('ctime','mdi-sort-clock-descending-outline')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-sort-clock-descending-outline" />
                                        <span>按创建时间排序</span>
                                    </div>
                                </q-item-section>
                            </q-item>
                            <q-separator />
                        </q-list>

                    </q-menu>
                </q-btn> -->
                <q-btn class="q-mr-sm" v-if="!isSearch" flat dense icon="search" @click="isSearch=true" />
                <q-input v-if="isSearch" autofocus dark filled clearable dense :debounce="200" @input="handleSearchInput" v-model="searchName" class="full-width" label="搜索">

                    <template v-slot:append>
                        <q-icon name="close" @click="handleSearchClose" class="cursor-pointer" />

                    </template>

                </q-input>
            </div>

        </div>

    </q-page-sticky>
    <q-dialog persistent fixed v-model="isLocalEffectDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down" @show="handleLoadLocalEffect">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>Nas效果</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="isLocalEffectDialog=false">
                    </q-btn>
                </q-toolbar>

            </q-header>
            <!-- <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

            <q-toolbar inset>

                <q-space></q-space>
                <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateProject"> 取消</q-btn>
                <q-btn outline class="q-px-md" @click="submitCreateProject"> 创建</q-btn>
            </q-toolbar>
        </q-footer> -->
            <q-page-container>
                <q-page class="bg-dark row hide-scrollbar">
                    <q-tree ref="effectTree" dark :nodes="localEffectTree" node-key="id" class="full-width" label-key="name" no-selection-unset :selected.sync="effectSelected" @lazy-load="onLazyLoad">
                        <template v-slot:default-header="prop">
                            <q-list dense class="full-width">
                                <q-item clickable @click="handleEffectItemClick(prop.node)" :active="prop.node.id==effectSelected" active-class="bg-primary" class="row items-center">
                                    <q-menu @show="handleFolderSelect(prop.node)" touch-position context-menu dark>

                                        <q-list dense style="min-width: 100px">
                                            <!-- <q-item v-if="prop.node.id!='111'" clickable v-close-popup>
                                                <q-item-section>
                                                    <div class="row items-center">
                                                        <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                        重命名
                                                    </div>
                                                </q-item-section>
                                            </q-item>
                                            <q-item clickable v-close-popup>
                                                <q-item-section>
                                                    <div class="row items-center">
                                                        <q-icon class="q-mr-sm" name="mdi-folder-outline" />
                                                        新建文件夹
                                                    </div>
                                                </q-item-section>
                                            </q-item>
                                            <q-separator dark /> -->
                                            <q-item clickable v-if="!prop.node.isUpload" v-close-popup @click="handleUploadEffectDialog(prop.node)">
                                                <q-item-section>
                                                    <div class="row items-center">
                                                        <q-icon class="q-mr-sm" name="mdi-upload" />
                                                        上传至特效库
                                                    </div>
                                                </q-item-section>
                                            </q-item>


                                        </q-list>

                                    </q-menu>

                                    <q-icon :name="prop.node.icon" color="cyan-6" size="28px" class="q-mr-sm" />
                                    <div class="text-weight-bold text-white">{{ prop.node.name }}</div>
                                    <q-badge v-if="prop.node.isUpload" outline color="green">已上传</q-badge>

                                </q-item>
                            </q-list>

                        </template>
                    </q-tree>

                    <q-inner-loading :showing="isLoading" class="bg-grey-10 text-grey-6">
                        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
                        数据加载中……
                    </q-inner-loading>
                    <q-dialog persistent fixed v-model="isUploadDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
                        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
                            <q-header class="bg-grey-10 shadow-7">

                                <q-toolbar>
                                    <q-toolbar-title>上传效果</q-toolbar-title>
                                    <q-space />

                                    <q-btn dense flat icon="close" @click="handleUploadNasClose">
                                    </q-btn>
                                </q-toolbar>

                            </q-header>

                            <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">
                                <div>
                                    <q-chip v-for="item in nasTickedType" :key="item.et_id" removable @remove="handleRemoveTicked(item.et_id)" color="primary" text-color="white">
                                        {{ item.name }}
                                    </q-chip>
                                </div>

                                <q-toolbar inset>

                                    <q-space></q-space>
                                    <!-- <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateProject"> 取消</q-btn> -->
                                    <q-btn outline class="q-px-md" @click="submitUploadNasEffect"> 确认</q-btn>
                                </q-toolbar>
                            </q-footer>
                            <q-page-container>

                                <q-page v-if="curEffect" class="bg-dark  column hide-scrollbar" style="padding-top:45px">

                                  <video class="full-width" ref="previewVideo" :src="GLOBAL.serveurl + '/nasdata'+curEffect.effectPath+'/preview.mp4'" controls autoplay></video>

                                  <q-toggle
                                  dark
                                  label="是否删除源文件"
                                  v-model="isDelete"
                                  color="red-6"
                                  class="text-primary"
                                />
                                    <q-tree :nodes="typeList" dark ref="typeTree" node-key="et_id" label-key="name" selected-color="primary" :selected.sync="selected" tickStrategy="leaf" :ticked.sync="ticked" @update:ticked="handleTypeTicked" :default-expand-all="true" />

                                    <q-page-sticky position="top" expand>
                                        <div class="text-white q-pt-sm full-width bg-dark">
                                            <tips-title :title="curEffect.name"></tips-title>
                                        </div>
                                    </q-page-sticky>

                                </q-page>
                            </q-page-container>

                        </q-layout>

                    </q-dialog>

                </q-page>

            </q-page-container>

        </q-layout>

    </q-dialog>

</q-page>
</template>

<script>
import {
    loadLocalEffectList,
    uploadNasEffect

} from "assets/api/studio/effect"

export default {
    name: 'EffectPage',
    components: {
        EffectList: () => import('components/studio/effect/EffectList.vue')
    },
    props: {
        user: {
            type: Object
        },
        isPlay: {
            default: false
        },
        curTab: {
            type: String,
            default: 'library'
        },
        typeList: {
            type: Array
        },
        tickedType: {
            type: Array
        },
        curLikePath: {
            type: Array
        },
        curCollectionPath: {
            type: Array
        }
    },
    data() {
        return {
            tab: 'library',
            isSearch: false,
            projectInfo: {},
            pid: '',

            isLoadType: false,
            searchName: '',
            collectionList: [],
            count: 0,
            sortType: 'name',
            sortIcon: 'mdi-sort-alphabetical-ascending',
            isLocalEffectDialog: false,
            isLoading: true,
            localEffectTree: [{
                id: 111,
                name: '03_效果制作',
                icon: 'mdi-folder-outline',
                isDirectory: true,
                children: []
            }],
            effectSelected: '',
            isUploadDialog: false,
            selected: [],
            ticked: [],
            nasTickedType: [],
            curEffect: null,
            isDelete:false

        };
    },
    created() {
        this.pid = this.$route.params.pid;
        let projectInfo = this.$storage.getItem(this.pid);
        this.projectInfo = projectInfo;

    },
    mounted() {
        // this.handleLoadMusicList()

    },
    methods: {
        submitUploadNasEffect(item) {
            console.log(this.curEffect, this.ticked);
            if (this.ticked.length == 0) {
                this.$message.warning('请先设置效果分类！')
                return
            }
            this.$q.loading.show()
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let reqdata = {
                projectPath: `/${projectFolder}/03_效果制作`,
                effectPath: this.curEffect.path,
                rawName: this.curEffect.name,
                type:this.ticked,
                isDelete:this.isDelete
            }

            uploadNasEffect(reqdata).then(res => {
              if (res.data.code == 1) {
                    this.$message.success('上传成功！')

                   this.handleLoadLocalEffect()
                    this.handleUploadNasClose()
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        handleUploadNasClose() {
            this.isUploadDialog = false
            this.curEffect = null;
            this.ticked = [];
            this.nasTickedType = []
        },
        handleTypeTicked(t) {
            console.log(this.ticked);
            let type = this.$refs.typeTree
            let ticked = this.ticked
            let arr = []
            ticked.forEach(i => {
                let obj = type.getNodeByKey(i)
                arr.push(obj)
            })

            console.log(arr);
            this.nasTickedType = arr
        },
        handleRemoveTicked(et_id) {
            console.log('remove', et_id);
            let type = this.$refs.typeTree
            let arr = []
            arr.push(et_id)
            type.setTicked(arr, false)
        },
        handleUploadEffectDialog(item) {
            this.isUploadDialog = true
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let projectPath = `/${projectFolder}/03_效果制作`
            item.effectPath = projectPath+item.path
            this.curEffect = item;
            console.log('upload effect',item);
            // let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            //   let reqdata = {
            //     projectPath:`/${projectFolder}/03_效果制作`,
            //       effectPath: item.path,
            //       rawName:item.name
            //   }

            //   uploadNasEffect(reqdata).then(res=>{

            //   })
        },
        handleFolderSelect(item) {
            // let tree = this.$refs.effectTree
            this.effectSelected = item.id
        },
        handleEffectItemClick(item) {
            ////console.log(item);
            if (item.isDirectory) {
                let tree = this.$refs.effectTree
                if (tree.isExpanded(item.id)) {
                    tree.setExpanded(item.id, false)
                } else {
                    tree.setExpanded(item.id, true)
                }

            }

        },
        onLazyLoad({
            node,
            key,
            done,
            fail
        }) {
            // call fail() if any error occurs
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let reqdata = {
                projectPath: `/${projectFolder}/03_效果制作`,
                effectPath: `${node.path}`
            }
            //console.log(node,reqdata);
            loadLocalEffectList(reqdata).then(res => {
                //console.log(res.data);
                this.isLoading = false
                if (res.data.code == 1) {
                    let data = res.data.data;
                    if (data.length > 0) {
                        let folderList = []
                        let fileList = []
                        data.forEach(i => {
                            if (i.isDirectory) {
                                i.icon = "mdi-folder-outline"
                                i.expandable = true
                                i.lazy = true
                                folderList.push(i)
                            } else {
                                if (/.mp4|.mov/ig.test(i.name)) {
                                    i.type = 'video'
                                    i.icon = 'mdi-movie-outline'
                                } else if (/.jpg|.png/ig.test(i.name)) {
                                    i.type = 'image'
                                    i.icon = 'mdi-image-outline'
                                } else {
                                    i.type = 'others'
                                    i.icon = 'mdi-file-document-outline'
                                }
                                fileList.push(i)
                            }
                        })
                        done(folderList.concat(fileList))
                    } else {
                        this.$message.warn('文件夹为空！')
                        done()
                    }

                }
            })

            // setTimeout(() => {
            //     // simulate loading and setting an empty node
            //     if (key.indexOf('Lazy load empty') > -1) {
            //         done([])
            //         return
            //     }

            //     const label = node.label
            //     done()
            // }, )
        },
        handleLoadLocalEffect() {
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let reqdata = {
                projectPath: `/${projectFolder}/03_效果制作`,
                effectPath: ''
            }
            loadLocalEffectList(reqdata).then(res => {
                //console.log(res.data);
                this.isLoading = false
                if (res.data.code == 1) {
                    let data = res.data.data;
                    data.forEach(i => {
                        if (i.isDirectory) {
                            i.icon = "mdi-folder-outline"
                            i.expandable = true
                            i.lazy = true
                            if(/[0-9]{8}_/.test(i.name)){
                              i.isUpload = true
                            }else{
                              i.isUpload = false
                            }

                        }

                    })
                    this.localEffectTree[0].children = data

                    let tree = this.$refs.effectTree
                    tree.expandAll()
                }
            })
        },

        handleRemoveTypeTicked(et_id) {
            this.$emit('removeTicked', et_id)
        },
        handleLoadEffectByType(type) {
            this.$refs.libraryList.curType = type;
            this.$refs.libraryList.pageNum = 1;
            this.$refs.libraryList.handleLoadEffectList();
        },
        handleLoadLikeListById(elf_id) {
            this.$refs.LikeList.elf_id = elf_id;
            this.$refs.LikeList.pageNum = 1;
            this.$refs.LikeList.handleLoadEffectList();
        },
        handleLikeSelect(id) {
            this.$emit('likeSelect', id)
        },
        handleLoadCollectionListById(ecf_id) {
            this.$refs.CollectionList.ecf_id = ecf_id;
            this.$refs.CollectionList.pageNum = 1;
            this.$refs.CollectionList.handleLoadEffectList();
        },
        handleCollectionSelect(id) {
            this.$emit('collectionSelect', id)
        },

        handleSearchClose() {
            this.isSearch = false;
            this.searchName = ''
            if (this.$refs.libraryList.searchName.length > 0) {
                this.$refs.libraryList.searchName = '';
                this.$refs.libraryList.pageNum = 1;
                this.$refs.libraryList.handleLoadEffectList();
            }

        },

        handleSearchInput(v) {
            //console.log(v);

            this.$refs.libraryList.searchName = v;
            this.$refs.libraryList.pageNum = 1;
            this.$refs.libraryList.handleLoadEffectList();
        },

        handlePageHeight(val, i) {

            return {
                height: i - val + 'px'
            }

        },

    }

};
</script>
